.container {
  min-width: 300px;
  max-width: 700px;
  margin: 0 auto;
  min-height: 150px;
  overflow-y: auto;
  padding: 10px 7px;
  box-sizing: border-box;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
    sans-serif;
  &.darkMode {
    .setting-list {
      background-color: rgba( 255, 255, 255,  0.11);
    }
    color: rgba(255, 255, 255, 0.6);
    background-color: #121212;
    .refresh {
      color: rgba(64, 158, 255, 0.6);
    }
    .btn {
      background-color: rgba(255, 255, 255, 0.16);
      color: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.6);
    }
    .primary {
      border: 1px solid rgba(64, 158, 255, 0.6);
      background-color: rgba(64, 158, 255, 0.6);
    }
    /deep/ .el-input__inner {
      background-color: rgba(255, 255, 255, 0.16);
      color: rgba(255, 255, 255, 0.6);
    }
    /deep/ .el-select__input {
      color: rgba(255, 255, 255, 0.6);
    }
  
    /deep/ tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.08);
    }
  
    .slt {
      border: 1px solid rgba(103, 194, 58, 0.6);
      background-color: rgba(103, 194, 58, 0.6);
    }
  
    .btn.red {
      border: 1px solid rgba(245, 108, 108, 0.6);
      background-color: rgba(245, 108, 108, 0.6);
    }
  
    .btn-up {
      border: 1px solid rgba(245, 108, 108, 0.6);
      background-color: rgba(245, 108, 108, 0.6);
    }
  
    .btn-down {
      border: 1px solid rgba(78, 182, 27, 0.6);
      background-color: rgba(78, 182, 27, 0.6);
    }
  
    .tab-col {
      background-color: rgba(255, 255, 255, 0.09);
      border-radius: 5px;
    }
  
    table {
      background-color: rgba(255, 255, 255, 0.12);
      border-radius: 5px;
    }
  
    ::placeholder {
      color: rgba(255, 255, 255, 0.38);
    }
  
    /deep/ .el-select .el-input.is-focus .el-input__inner {
      border-color: rgba(64, 158, 255, 0.6);
    }
  
    /deep/ .el-select .el-tag {
      background-color: rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.6);
    }
  
    /deep/ .el-select-dropdown {
      background-color: #383838;
      border: 1px solid rgba(255, 255, 255, 0.38);
      .popper__arrow::after {
        border-bottom-color: #383838;
      }
      .el-scrollbar {
        background-color: rgba(255, 255, 255, 0.16);
      }
      .el-select-dropdown__item {
        color: rgba(255, 255, 255, 0.6);
      }
  
      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        background-color: rgba(255, 255, 255, 0.08);
      }
      .el-select-dropdown__item.selected {
        color: rgba(64, 158, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.08);
      }
      .el-select-dropdown__item.selected::after {
        color: rgba(64, 158, 255, 0.6);
      }
    }
  
    /deep/ .el-switch__label.is-active {
      color: rgba(64, 158, 255, 0.87);
    }
    /deep/ .el-switch__label {
      color: rgba(255, 255, 255, 0.6);
    }
  
    /deep/ .hasReplace-tip {
      color: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(64, 158, 255, 0.6);
      background-color: rgba(64, 158, 255, 0.6);
    }
  }
  
}